import {
  BarSeriesOption,
  EChartsOption,
  LegendComponentOption,
  LineSeriesOption,
  PieSeriesOption,
  TitleComponentOption,
  XAXisComponentOption,
  YAXisComponentOption
} from 'echarts';
import * as echarts from 'echarts/core';
import { defaultsDeep } from 'lodash-es';

import { px } from '@/utils';

// 颜色
export const chartColors = {
  yellow: '#FFC671',
  green: '#80E4B7',
  blue: '#57E0FF',
  orange: '#FF8347'
};

/** 默认title配置 */
export const defaultTitleConfig = (config?: TitleComponentOption) => {
  return defaultsDeep({}, config, {
    top: px(20),
    left: px(20),
    textStyle: {
      fontSize: px(12),
      color: 'rgba(208,244,234,0.15)'
    }
  } as TitleComponentOption) as TitleComponentOption;
};

/** 默认legend配置 */
export const defaultLegendConfig = (config?: LegendComponentOption) => {
  return defaultsDeep({}, config, {
    top: '2%',
    right: 0,
    // icon: 'roundRect',
    itemWidth: px(12),
    itemHeight: px(4),
    itemGap: px(8),
    textStyle: {
      fontSize: px(12),
      color: '#D0F4EA'
    }
  } as LegendComponentOption) as LegendComponentOption;
};

/** 默认x轴配置 */
export const defaultXAxisConfig = (config?: XAXisComponentOption) => {
  return defaultsDeep({}, config, {
    type: 'category',
    nameTextStyle: {
      color: 'rgba(255, 255, 255, 1)',
      fontSize: px(12),
      align: 'right',
      verticalAlign: 'bottom',
      padding: [0, px(-35), px(-23), 0]
    },
    axisLabel: {
      color: '#D0F4EA',
      fontSize: px(12)
    },
    // x轴的线
    axisLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: 'rgba(208,244,234,0.15)'
      }
    },
    // x轴的刻度线
    axisTick: {
      show: false
    },
    // 竖向的分割线
    splitLine: {
      show: false,
      lineStyle: {
        // color: 'rgba(255,255,255,.1)'
      }
    }
  } as XAXisComponentOption) as XAXisComponentOption;
};

/** 默认y轴配置 */
export const defaultYAxisConfig = (config?: YAXisComponentOption) => {
  return defaultsDeep({}, config, {
    type: 'value',
    nameTextStyle: {
      color: '#D0F4EA',
      fontSize: px(12),
      // align: 'right',
      padding: [0, 0, 0, 0]
    },
    axisLabel: {
      color: '#D0F4EA',
      fontSize: px(12)
    },
    axisLine: {
      lineStyle: {
        // color: '#1CFFF7'
      }
    },
    splitLine: {
      lineStyle: {
        // color: 'rgba(0,0,0,.1)'
        color: 'rgba(208,244,234,0.15)',
        type: 'dashed',
        width: 0.5
      }
    }
  } as YAXisComponentOption) as YAXisComponentOption;
};

/**
 * 默认坐标系配置
 */
export const defaultXYConfig = (option?: EChartsOption) => {
  const grid: EChartsOption['grid'] = {
    left: '6%',
    right: '6%',
    bottom: '5%',
    top: '3%',
    containLabel: true
  };

  const title = defaultTitleConfig();

  return defaultsDeep({}, option, {
    tooltip: {
      appendToBody: true,
      trigger: 'axis'
    },
    grid,
    title,
    legend: defaultLegendConfig(),
    // 横向的x轴
    xAxis: defaultXAxisConfig(),
    // 竖向的y轴
    yAxis: defaultYAxisConfig()
  } as EChartsOption) as EChartsOption;
};

/**
 * 默认纵向坐标系配置
 */
export const defaultHXYConfig = (option?: EChartsOption) => {
  const grid: EChartsOption['grid'] = {
    left: '3%',
    right: '3%',
    bottom: '3%',
    top: '5%',
    containLabel: true
  };

  return defaultsDeep({}, option, {
    tooltip: {
      trigger: 'axis'
    },
    grid,
    legend: defaultLegendConfig(),
    // 横向的x轴
    xAxis: {
      ...defaultYAxisConfig(),
      nameTextStyle: {
        color: 'rgba(181, 197, 212, 1)',
        fontSize: px(12),
        align: 'right',
        verticalAlign: 'bottom',
        padding: [0, px(-35), px(-23), 0]
      },
      type: 'value'
    },
    // 竖向的y轴
    yAxis: {
      ...defaultXAxisConfig(),
      type: 'category'
    }
  } as EChartsOption) as EChartsOption;
};

/**
 * 默认进度条配置
 */
export const defaultProgressConfig = (option?: EChartsOption) => {
  return defaultsDeep({}, option, {
    title: {
      text: `{value|56}{unit|%}`,
      left: 'center',
      top: 'center',
      itemGap: 0,
      textStyle: {
        rich: {
          value: {
            fontSize: px(36),
            fontFamily: 'DINCond-Regular',
            color: '#fff'
          },
          unit: {
            fontSize: px(14),
            color: '#fff',
            fontFamily: 'DINCond-Regular',
            padding: [px(11), 0, 0, px(3)]
          }
        }
      }
    },
    tooltip: {
      show: false
    },
    angleAxis: {
      max: 100,
      // 隐藏刻度线
      show: false,
      startAngle: 90
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    polar: {
      radius: '100%' //图形大小
    },
    series: [
      {
        type: 'bar',
        data: [56.77],
        showBackground: true,
        roundCap: true,
        backgroundStyle: {
          color: '#507190'
        },
        labelLine: {
          show: false
        },
        coordinateSystem: 'polar',
        barWidth: px(10),
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#1DB4FF' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#00B091' // 100% 处的颜色
              }
            ]
          }
        }
      }
    ]
  } as EChartsOption) as EChartsOption;
};

/**
 * 默认折线图配置
 */
export const defaultLineConfig = (option?: LineSeriesOption, configColor?: string) => {
  const color = configColor ?? chartColors.blue;

  return defaultsDeep({}, option, {
    type: 'line',
    color: color,
    lineStyle: {
      // shadowColor: color,
      // shadowOffsetX: 0,
      // shadowOffsetY: 0,
      // opacity: 1,
      // shadowBlur: 8,
      type: 'solid',
      width: px(2)
    },
    // 阴影
    areaStyle: {
      opacity: 0.1,
      color: color
    }
  } as LineSeriesOption) as LineSeriesOption;
};

/**
 * 默认柱状图配置
 */
export const defaultBarConfig = (
  option?: BarSeriesOption,
  direction: 'horizontal' | 'vertical' = 'vertical'
) => {
  const colorConfig = direction === 'vertical' ? [0, 1, 0, 0] : [0, 0, 1, 0];

  return defaultsDeep({}, option, {
    type: 'bar',
    barWidth: px(12),
    showBackground: true,
    backgroundStyle: {
      color: 'rgba(187,230,245,0.1)'
    },
    itemStyle: {
      color: (params) => {
        return new echarts.graphic.LinearGradient(
          colorConfig[0],
          colorConfig[1],
          colorConfig[2],
          colorConfig[3],
          [
            {
              offset: 0,
              color: 'rgba(54,69,129,1)'
            },
            {
              offset: 0.9,
              color: params.color as string
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0.8)'
            }
          ]
        );
      }
    }
  } as BarSeriesOption) as BarSeriesOption;
};

/**
 * 默认饼图配置
 */
export const defaultPieConfig = (option?: PieSeriesOption, _unitText?: string) => {
  const unitText = _unitText || '';

  return defaultsDeep({}, option, {
    type: 'pie',
    label: {
      formatter: `{name|{b}}\n{value|{c}}{unit|${unitText}}\n{per|{d}}{pUnit|%}`,
      rich: {
        name: {
          fontSize: px(10),
          color: '#fff',
          padding: [0, 0, px(4), 0]
        },
        value: {
          fontSize: px(20),
          fontFamily: 'DINCond-Regular',
          color: '#fff'
        },
        unit: {
          fontSize: px(10),
          color: '#fff',
          fontFamily: 'DINCond-Regular',
          padding: [px(4), 0, 0, px(1)]
        },
        per: {
          fontSize: px(20),
          color: '#fff',
          fontFamily: 'DINCond-Regular'
        },
        pUnit: {
          fontSize: px(10),
          color: '#fff',
          fontFamily: 'DINCond-Regular',
          padding: [px(4), 0, 0, px(1)]
        }
      }
    }
  } as PieSeriesOption) as PieSeriesOption;
};

export type { EChartsOption } from 'echarts';
